import React, { useState } from 'react'
import axios from 'axios';
import PubSub from 'pubsub-js';

export default function Header() {
    //受控表单获取值
    const [search,setSearch] = useState('')
    //事件函数
    const changeSearchHandle = (e)=>{
      setSearch(e.target.value)
    }
    //给按钮绑定Ajax请求 
    const searchHandle = async()=>{

      PubSub.publish("github", { isInit: false, isSearch: true, data: [] })

     const result =  await axios.get('https://api.github.com/search/users?q='+search)
     //请求到的数据
     console.log(result);
     //得到数据 发布数据 兄弟传值 先订阅在发布
     PubSub.publish("github", { isInit: false, isSearch: false, data: result.data.items })


    }


  return (
    <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" value={search} onChange={changeSearchHandle} placeholder="enter the name you search" />
        &nbsp;
        <button onClick={searchHandle}>Search</button>
      </div>
    </section>
  )
}
